<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"

    />
    <div class="app-container"  ref="block">
      <div class="containerMain">
        <div class="search-item">
          <div class="item-list">
            <div class="item-con">
              <span>时间</span>
              <el-date-picker
                  v-model="timeValue"
                  unlink-panels
                  :picker-options="pickerOptions"
                  size="mini"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </div>
            <div class="item-con">
              <span>参会人标识</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.agentId"
                placeholder="请输入参会人标识"
              ></el-input>
            </div>
<!--            <div class="item-con">-->
<!--              <span>坐席视讯号</span>-->
<!--              <el-input-->
<!--                style="width: 200px"-->
<!--                size="mini"-->
<!--                v-model="searchform.agentVideoNum"-->
<!--                placeholder="请输入坐席视讯号"-->
<!--              ></el-input>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>客户视讯号</span>-->
<!--              <el-input-->
<!--                style="width: 200px"-->
<!--                size="mini"-->
<!--                v-model="searchform.customerVideoNum"-->
<!--                placeholder="请输入客户视讯号"-->
<!--              ></el-input>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>坐席姓名</span>-->
<!--              <el-input-->
<!--                style="width: 200px"-->
<!--                size="mini"-->
<!--                v-model="searchform.agentName"-->
<!--                placeholder="请输入坐席姓名"-->
<!--              ></el-input>-->
<!--            </div>-->
            <div class="item-con">
              <span>sessionID</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.sessionId"
                placeholder="请输入sessionID"
              ></el-input>
            </div>
            <div class="item-con">
              <span>会议编号</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.meetingId"
                placeholder="请输入会议编号"
              ></el-input>
            </div>
            <div class="item-con">
              <span>发起人标识</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.ani"
                placeholder="请输入发起人标识"
              ></el-input>
            </div>
            <div class="item-con">
              <span>是否接通</span>
              <el-select
                size="mini"
                clearable
                v-model="searchform.isCall"
                placeholder="全部"
              >
                <el-option label="全部" value="0"></el-option>
                <el-option label="接通" value="1"></el-option>
                <el-option label="未接通" value="2"></el-option>
              </el-select>
            </div>

<!--            <div class="item-con">-->
<!--              <span>是否加急</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                style="width: 100px"-->
<!--                clearable-->
<!--                v-model="searchform.urgentTitle"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option label="是" value="1"></el-option>-->
<!--                <el-option label="否" value="2"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>客户星级</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                style="width: 100px"-->
<!--                clearable-->
<!--                v-model="searchform.stars"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option label="1" value="1"></el-option>-->
<!--                <el-option label="2" value="2"></el-option>-->
<!--                <el-option label="3" value="3"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>结束类型</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                clearable-->
<!--                v-model="searchform.endType"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option label="坐席离开" value="1"></el-option>-->
<!--                <el-option label="客户离开" value="2"></el-option>-->
<!--                <el-option label="异常离开" value="-1"></el-option>-->
<!--                <el-option label="客户取消排队" value="3"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->

<!--            <div class="item-con">-->
<!--              <span>技能组</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                clearable-->
<!--                v-model="searchform.skillId"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in skillList"-->
<!--                  :key="index"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>加急审核状态</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                clearable-->
<!--                style="width: 100px"-->
<!--                v-model="searchform.approved"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option label="未处理" value="1"></el-option>-->
<!--                <el-option label="通过" value="2"></el-option>-->
<!--                <el-option label="驳回" value="3"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="item-con">-->
<!--              <span>是否接通</span>-->
<!--              <el-select-->
<!--                size="mini"-->
<!--                clearable-->
<!--                style="width: 100px"-->
<!--                v-model="searchform.success"-->
<!--                placeholder="全部"-->
<!--              >-->
<!--                <el-option label="接通" value="1"></el-option>-->
<!--                <el-option label="未接通" value="2"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->

          </div>
          <div class="item-btn">
            <el-button
              class="kyeup_search_btn"
              type="primary"
              size="mini"
              @click="() => fetchData()"
              >搜索</el-button
            >
            <el-button type="default" size="mini" @click="() => reset()"
              >重置</el-button
            >
          </div>
        </div>
        <div class="container">
          <div class="div-table">
            <el-table
              :header-cell-style="headerStyle"
              :data="list"
              element-loading-text="Loading"
              fit
              size="mini"
              highlight-current-row
              :height="tableHeight"
            >
              <el-table-column label="sessionID">
                <template slot-scope="scope">{{ scope.row.sessionId }}</template>
              </el-table-column>
              <el-table-column label="会议编号">
                <template slot-scope="scope">{{
                  scope.row.meetingId
                }}</template>
              </el-table-column>
              <el-table-column label="会议创建时间">
                <template slot-scope="scope">{{ scope.row.meetingCreateTime }}</template>
              </el-table-column>
              <el-table-column label="会议开始时间">
                <template slot-scope="scope">{{
                  scope.row.dialTime
                }}</template>
              </el-table-column>

              <el-table-column label="会议结束时间">
                <template slot-scope="scope">{{
                  scope.row.endTime
                }}</template>
              </el-table-column>
              <el-table-column label="发起人标识">
                <template slot-scope="scope">{{
                  scope.row.ani
                }}</template>
              </el-table-column>
              <el-table-column label="发起人号码">
                <template slot-scope="scope">{{
                  scope.row.aniVideoNum
                }}</template>
              </el-table-column>
              <el-table-column label="参会人标识">
                <template slot-scope="scope">{{
                  scope.row.agentId
                }}</template>
              </el-table-column>
              <el-table-column label="参会人姓名">
                <template slot-scope="scope">
                  <el-button type="text" @click="() => viewAttendee(scope.row)"
                    >{{ scope.row.agentName }}</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                  <!-- <el-button type="text" @click="() => viewAttendee(scope.row)"
                    >参会人</el-button
                  > -->
                  <el-button type="text" @click="() => viewDetail(scope.row)" v-show="scope.row.dialTime != null || scope.row.meetingId != null"
                    >视频</el-button
                  >
                  <el-button type="text" @click="() => viewPhotoDetail(scope.row)" v-show="scope.row.dialTime != null || scope.row.meetingId != null"
                    >照片</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
    </div>
    <el-dialog title="参会人详情" :visible.sync="dialogTableVisible">
      <el-table :data="attendeeData">
        <el-table-column property="userId" label="参会人" width="150"></el-table-column>
        <el-table-column property="userType" label="参会人类型" width="150" :formatter="formatter"></el-table-column>
        <el-table-column property="joinTime" label="进入会议时间" width="200"></el-table-column>
        <el-table-column property="leaveTime" label="离开会议时间"></el-table-column>
      </el-table>
    </el-dialog>
    <pagination
      :exportShow="true"
      :type="'primary'"
      @handelExport="exportDetail"
      btnExport="导出"
      :pagination="pagination"
    />


  </div>
</template>

<script>
import {  fetchAllSkill} from "@/api/systemapi/skill";

import moment from "moment";
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAgentList
} from "@/api/systemapi/agent";
import {
  fetchList,fetchDetailExport, fetchAttendeeDetail,fetchDetailExportCheck
} from "@/api/systemapi/video";
import {
  fetchAll
} from "@/api/systemapi/skill";
import { pageParams } from "@/settings";

export default {
  components: {
    Pagination,
    HeaderTitle
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用",
      };
      return statusMap[status];
    },
  },
  data() {
    const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
    const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
    return {
      titleList: [{ title: "视频明细报表" }],
      dialogTableVisible: false,//参会人弹框控件
      attendeeData: [],
      list:[],
      skillList:[],
      tableHeight: "300", //表格默认高度
      timeValue: [TODAYSTART, TODAYEND],
      listLoading: true,
      skillGroupList: [],
      searchform: {
        rows: "10",
        page: "1",
        sTime:"",
        eTime:"",
        ani:"",
        agentId:"",
        agentVideoNum:"",
        customerVideoNum:"",
        isCall:"0",
        agentName:"",
        sessionId:"",
        meetingId:"",
        urgentTitle:"",
        stars:"",
        endType:"",
        skillId:"",
        auditResult:"",
        success:"",
      },
      // 分页
      pagination: pageParams,
      pickerOptions: {
        shortcuts: [
          {
            text: '昨天',
            onClick(picker) {
              const yestStart =  moment().subtract(1, "days").format('YYYY-MM-DD 00:00:00')
              const yestEnd = moment().subtract(1, "days").format('YYYY-MM-DD 23:59:59')
              picker.$emit('pick', [yestStart,yestEnd]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const startWeek = moment()
                .day(1)
                .startOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              const endWeek = moment()
                .day(7)
                .endOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              picker.$emit("pick", [startWeek, endWeek]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const startLastWeek = moment()
                .day(-6)
                .startOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              const endLastWeek = moment()
                .day(0)
                .endOf("day")
                .format("YYYY-MM-DD HH:mm:ss");
              picker.$emit("pick", [startLastWeek, endLastWeek]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              let startMon = moment()
                .month(moment().month())
                .startOf("month");
              let endMon = moment()
                .month(moment().month())
                .endOf("month");
              picker.$emit("pick", [startMon, endMon]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const startLastMon = moment()
                .month(moment().month() - 1)
                .startOf("month");
              const endLastMon = moment()
                .month(moment().month() - 1)
                .endOf("month");
              picker.$emit("pick", [startLastMon, endLastMon]);
            }
          }
        ]
      }
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    },
  },
  mounted() {
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 220;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 220;
        })();
      };
    });
    //把技能组下拉框查出来
    //this.getSkillList();
    this.fetchData()
  },
  methods: {
    exportUser() {
      downloadUserInfo({
        exportType: 1,
        ...this.searchform,
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    exportDemo() {
      downloadUserInfo({ exportType: 2 }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    getOrganList() {
      fetchOrganList().then((res) => {
        this.treeData = res.data;
      });
    },
    // 账号权限下拉
    getAccount() {
      fetchAccount().then((res) => {
        this.accountList = res.rows;
      });
    },
    // 点击树形节点 ，过滤列表坐席
    filterDepart(data) {
      let organId =
        this.searchform.organId.length > 0
          ? this.searchform.organId[this.searchform.organId.length - 1]
          : "";
      fetchAgentList({
        organTreeId: data.id,
        entNum: this.entNum,
        username: this.searchform.username,
        roleId: this.searchform.roleId,
        organId: organId,
        rows: this.searchform.rows,
        page: this.searchform.page,
      }).then((response) => {
        if (response.code == 0) {
          this.list = response.data.rows;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 重置搜索，刷新列表
    reset() {
      const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
      const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
      this.timeValue = [TODAYSTART, TODAYEND],
      this.searchform = {
        sTime:this.timeValue[0],
        eTime:this.timeValue[1],
        agentId:"",
        agentVideoNum:"",
        ani:"",
        customerVideoNum:"",
        agentName:"",
        sessionId:"",
        meetingId:"",
        urgentTitle:"",
        stars:"",
        endType:"",
        skillId:"",
        auditResult:"",
        success:"",
        rows: "10",
        page: "1",
      }
      // this.timeValue = [];
        // this.fetchData();
    },
    getSkillList(){
      fetchAllSkill({}).then((response) => {
        if (response.code == 0) {
         this.skillList = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });

    },
    formatter(row, column) {
        return row.userType==1 ? "坐席" : "客户";
      },
    //参会人
    viewAttendee(row){
      // alert(row)
      this.dialogTableVisible=true
      fetchAttendeeDetail({
          sessionId:row.sessionId,
          meetingId:row.meetingId
      }).then((response)=>{
        console.log(response)
        if(response.code==0){
          this.attendeeData=response.data
        }else{
          this.$message({
            type: "error",
            message: response.msg,
          });
        }

      })
    },
    //跳转进详情页
    viewDetail(row){
      this.$router.push({
        path: "/system/video/detail/play",
        query: {
          type:"meetingDetail",
          meetingId: row.meetingId,
          dialTime: row.dialTime,
          endTime: row.endTime,
          agentId: row.agentId,
          aniVideoNum: row.aniVideoNum
        },
      });
    },

    viewPhotoDetail(row){
      this.$router.push({
        path: "/system/photo/detail",
        query: {
          meetingId: row.meetingId,
          sessionId: row.sessionId,

        },
      });
    },


    exportDetail() {

        if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.sTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.eTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      fetchDetailExportCheck({ ...this.searchform }).then(response => {
        if(response.code == 0){
          fetchDetailExport({ ...this.searchform }).then((res) => {
            console.log(res);
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            let str = res.headers["content-disposition"].split(";")[1];
            // console.log(str,"str1111")
            if (str.indexOf("=") != -1) {
              var filename = decodeURI(str.slice(9));
            } else {
              var filename = decodeURI(str);
            }
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          });
        }else{
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });

    },

    fetchData() {
      console.log(this.timeValue,"this.timeValue");
      if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.sTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.eTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        console.log(this.searchform.sTime,"231232312");

      fetchList({...this.searchform}).then((response) => {
        if (response.code == 0) {
          this.list = response.data.rows;
          this.pagination.total = response.data.records;
          console.log(response.data.rows)
          console.log(this.list)
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    fetchDetailData(id) {
      fetchDetail({id: id}).then((response) => {
        if (response.code == 0) {
          this.list = response.data;
          this.pagination.total = response.data.records;
          this.$router.push({ path: "/" });
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 删除
    del(data) {
      this.$confirm("是否确定注销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        fetchDel(data.id).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: "注销成功",
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    recover(data) {
      fetchRecover({ id: data.id, userType: "3" }).then((response) => {
        if (response.code === 0) {
          this.fetchData();
          this.$message({
            message: "恢复成功",
            type: "success",
          });
        } else {
          this.$message({
            message: response.msg,
            type: "error",
          });
        }
      });
    },
    resetPas(data) {
      this.$confirm("是否确定重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchSetPsd({ id: data.id }).then((response) => {
            if (response.code === 0) {
              this.$message({
                message: "重置成功",
                type: "success",
              });
              this.fetchData();
            } else {
              this.$message({
                message: response.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置",
          });
        });
    },
    // 新增
    add(data) {
      this.$router.push({
        path: "/system/agent/detail",
        query: { type: 3},
      });
    },
    editBtn(data) {
      this.$router.push({
        path: "/system/agent/detail",
        query: { type: "2", id: data.id},
      });
    },
    viewFn(data) {
        this.$router.push({
        path: "/system/agent/detail",
        query: { type: "1", id: data.id},
      });
    },
    handelExport() {
      this.dialogVisible = true;
    },
    // 批量导入文件
    httpRequestExport(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fetchExport(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitUpload() {
      this.$refs.uploadBatch.submit();
    },
    // resetFileds() {
    //   // 重置校验
    //   if (this.$refs["ruleForm"]) {
    //     this.$refs["ruleForm"].resetFields();
    //   }
    // }
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  .search-item {
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      margin-top: 20px;

      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .item-btn {
    margin-top: 20px;
    flex: 0 0 140px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
